<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 店铺设置 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 店铺信息 -->
            <div class="page">
                <div class="s-head shopFirstMsg">店铺信息</div>
                <div class="item">
                    <h4 class="name">店铺名称</h4>
                    <div class="setting">
                        <p>{{ shopSetList.shopname }}</p>
                        <div class="right">
                            <el-button @click="set_title" type="text">设置</el-button>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">店铺logo</h4>
                    <div class="setting">
                        <img :src="shopSetList.cover" alt="" class="info-image" />
                        <div class="right">
                            <el-button @click="set_logo" type="text">更换</el-button>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">店铺类型</h4>
                    <div class="setting">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in girdlist" :key="item.title" :label="item.title" :value="item.title"> </el-option>
                        </el-select>
                        <div class="right">
                            <el-button @click="save_shoptype" type="text">保存</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 公众号配置 -->
            <div class="page">
                <div class="s-head shopFirstMsg">公众号配置</div>
                <el-form
                    :model="publicAccountForm"
                    :rules="publicAccountRules"
                    ref="publicAccountForm"
                    label-width="100px"
                    class="demo-ruleForm"
                    style="margin-top: 20px"
                >
                    <el-form-item label="APPID" prop="APPID" style="width: 400px">
                        <el-input v-model="publicAccountForm.appid"></el-input>
                    </el-form-item>

                    <el-form-item label="APPSECRET" prop="APPSECRET" style="width: 400px">
                        <el-input v-model="publicAccountForm.secret"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('publicAccountForm')">确定</el-button>
                        <!-- <el-button @click="pubReset('publicAccountForm')">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </div>
            <div class="postion_img">
                <img
                    style="height: 60%; width: 100%"
                    src="https://newxuejingimage.oss-cn-beijing.aliyuncs.com/image/admin/30/539f2aaaceb191d4f52af9211de8b1a.png"
                    alt=""
                />
            </div>
            <!-- 支付配置 -->
            <div class="page">
                <div class="s-head shopFirstMsg">支付配置</div>
                <el-form
                    :model="weChatForm"
                    :rules="weChatrules"
                    ref="weChatForm"
                    label-width="100px"
                    class="demo-ruleForm"
                    style="margin-top: 20px"
                >
                    <el-form-item label="MCHID" prop="MCHID" style="width: 400px">
                        <el-input v-model="weChatForm.MCHID"></el-input>
                    </el-form-item>

                    <el-form-item label="APIKEY" prop="APIKEY" style="width: 400px">
                        <el-input v-model="weChatForm.APIKEY"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('weChatForm')">确定</el-button>
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </el-form-item>
                </el-form>
            </div>

            <!--店铺提现账号设置-->
            <div class="page">
                <div class="s-head shopFirstMsg">网校提现账号</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 20px">
                    <el-form-item label="真实姓名" prop="truename" style="width: 400px">
                        <el-input v-model="ruleForm.truename"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" prop="zhtype">
                        <el-select v-model="ruleForm.zhtype" placeholder="请选择账号类型">
                            <el-option label="微信" value="weixin"></el-option>
                            <el-option label="支付宝" value="alipay"></el-option>
                            <el-option label="银行卡号" value="bank"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="微信账号" prop="zh" v-if="ruleForm.zhtype == 'weixin'" style="width: 400px">
                        <el-input v-model="ruleForm.zh"></el-input>
                    </el-form-item>
                    <el-form-item label="支付宝账号" prop="zh" v-if="ruleForm.zhtype == 'alipay'" style="width: 400px">
                        <el-input v-model="ruleForm.zh"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号" prop="zh" v-if="ruleForm.zhtype == 'bank'" style="width: 400px">
                        <el-input v-model="ruleForm.zh"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 功能配置 -->
            <div class="page">
                <div class="s-head shopFirstMsg">功能配置</div>
                <!-- <div class="item">
                    <h4 class="name">联系客服</h4>
                    <div class="setting">
                        <p>联系客服</p>
                        <div class="right">
                            <el-button type="text">设置</el-button>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="item">
                    <h4 class="name">关注公众号</h4>
                    <div class="setting">
                        <p>关注公众号</p>
                        <div class="right">
                            <el-button type="text">设置</el-button>
                        </div>
                    </div>
                </div> -->
                <div class="item">
                    <h4 class="name">店铺简介</h4>
                    <div class="setting">
                        <p>{{ shopSetList.content ? '已设置' : '未设置' }}</p>
                        <div class="right">
                            <el-button @click="set_content" type="text">设置</el-button>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">自定义分享语</h4>
                    <div class="setting">
                        <p>{{ shopSetList.share ? '已设置' : '未设置' }}</p>
                        <div class="right">
                            <el-button @click="set_share" type="text">设置</el-button>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">自定义版权</h4>
                    <div class="setting">
                        <p>{{ shopSetList.copyright ? '已设置' : '未设置' }}</p>
                        <div class="right">
                            <el-button @click="set_copyright" type="text">设置</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 显示设置 -->
            <div class="page">
                <div class="s-head shopFirstMsg">功能配置</div>
                <div class="item">
                    <h4 class="name">是否显示阅读量</h4>
                    <div class="setting">
                        <el-switch
                            @change="show_set"
                            v-model="form.show_view"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="显示"
                            inactive-text="隐藏"
                        ></el-switch>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">是否显示订阅量</h4>
                    <div class="setting">
                        <el-switch
                            @change="show_set"
                            v-model="form.show_sale"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="显示"
                            inactive-text="隐藏"
                        ></el-switch>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">是否显示收藏量</h4>
                    <div class="setting">
                        <el-switch
                            @change="show_set"
                            v-model="form.show_favorites"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="显示"
                            inactive-text="隐藏"
                        ></el-switch>
                    </div>
                </div>
                <div class="item">
                    <h4 class="name">是否显示划线价格</h4>
                    <div class="setting">
                        <el-switch
                            @change="show_set"
                            v-model="form.show_marking_price"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="显示"
                            inactive-text="隐藏"
                        ></el-switch>
                    </div>
                </div>
            </div>
        </div>
        <!-- 所有设置弹框 -->
        <el-dialog title="店铺简介" @close="cancel" :visible.sync="shop_content_dialog" width="30%">
            <el-form ref="form" :model="form">
                <el-form-item label="店铺简介">
                    <el-input v-model="form.content" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="店铺名称" @close="cancel" :visible.sync="shop_title_dialog" width="30%">
            <el-form ref="form" :model="form">
                <el-form-item>
                    <el-input v-model="form.shopname"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="店铺logo" @close="cancel" :visible.sync="shop_logo_dialog" width="30%">
            <el-form ref="form" :model="form">
                <el-form-item>
                    <div class="avatar-uploader" @click="showUploadImage()">
                        <img v-if="form.cover" :src="form.cover" class="avatar" height="200px" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                    <div slot="tip" class="el-upload__tip">建议尺寸：80*60px，支持jpg、png</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分享语 -->
        <el-dialog title="自定义分享语" @close="cancel" :visible.sync="shop_share_dialog" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="分享标题">
                    <el-input v-model="form.share.title"></el-input>
                </el-form-item>
                <el-form-item label="简短描述">
                    <el-input v-model="form.share.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="自定义版权" @close="cancel" :visible.sync="shop_copyright_dialog" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="是否显示版权">
                    <el-switch
                        v-model="form.copyright.show"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="版权标题">
                    <el-input v-model="form.copyright.title"></el-input>
                </el-form-item>
                <el-form-item label="版权描述">
                    <el-input v-model="form.copyright.description"></el-input>
                </el-form-item>
                <el-form-item label="官网地址">
                    <el-input v-model="form.copyright.url"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="绑定手机号" @close="cancel" :visible.sync="shop_mobile_dialog" width="30%">
            <el-form ref="form" :model="form">
                <el-form-item>
                    <el-radio-group v-model="form.mobile_bind">
                        <el-radio :label="0">不绑定手机号</el-radio>
                        <el-radio :label="1">注册时绑定手机号</el-radio>
                        <el-radio :label="2">购买前绑定手机号</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
    </div>
</template>

<script>
import uploadimage from '@/components/common/uploadimage.vue';
import {
    footerNavListData,
    editFooterNavData,
    saveSchoolPayInfo,
    getSchoolPayInfo,
    setShopType,
    getPublicAccount,
    savePublicAccount,
    getWeChatPayConfig,
    saveWeChatPayConfig
} from '../../api/index';
export default {
    // name: 'shop',
    components: {
        uploadimage
    },
    data() {
        return {
            girdlist: [
                {
                    title: '读书文化'
                },
                {
                    title: '财经楼市'
                },
                {
                    title: '养生塑性'
                },
                {
                    title: '情感心理'
                },
                {
                    title: '职场技能'
                },
                {
                    title: 'IT科技'
                },
                {
                    title: '管理咨询'
                },
                {
                    title: '电影'
                },
                {
                    title: '科技'
                },
                {
                    title: '音乐'
                },
                {
                    title: '美食'
                },
                {
                    title: '文化'
                },
                {
                    title: '财经'
                },
                {
                    title: '手工'
                }
            ],
            value: '',
            shopSetList: {},
            form: {
                shopname: '',
                content: '',
                cover: '',
                share: {
                    title: '',
                    desc: ''
                },
                copyright: {
                    show: '',
                    title: '',
                    description: '',
                    url: ''
                },
                show_view: '',
                show_sale: '',
                show_favorites: '',
                show_marking_price: ''
            },
            imgUrl: 'http://api.xuejing.pro/admin/file/image',
            shop_title_dialog: false,
            shop_logo_dialog: false,
            shop_content_dialog: false,
            shop_share_dialog: false,
            shop_copyright_dialog: false,
            shop_mobile_dialog: false,

            ruleForm: {
                truename: '',
                zhtype: 'weixin',
                zh: ''
            },
            rules: {
                truename: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                ],
                zhtype: [{ required: true, message: '请选择账号类型', trigger: 'change' }],
                zh: [{ required: true, message: '请输入账号', trigger: 'blur' }]
            },

            publicAccountForm: {
                appid: '',
                secret: ''
            },
            publicAccountRules: {
                appid: [
                    { required: true, message: '请输入APPID', trigger: 'blur' },
                    { min: 18, max: 18, message: '长度 18 个字符', trigger: 'blur' }
                ],
                secret: [
                    { required: true, message: '请输入APPSECRET', trigger: 'blur' },
                    { min: 32, max: 32, message: '长度 32 个字符', trigger: 'blur' }
                ]
            },

            weChatForm: {
                MCHID: '',
                APIKEY: ''
            },
            weChatrules: {
                MCHID: [
                    { required: true, message: '请输入MCHID', trigger: 'blur' },
                    { pattern: /^[1-9]\d{9}$/, message: '请输入合规的MCHID(10位数数字)', trigger: 'change' }
                    // {  message: '长度 10 个字符', precision: '10' },
                    // 1650301095
                ],
                APIKEY: [
                    { required: true, message: '请输入APIKEY', trigger: 'blur' },
                    { min: 32, max: 32, message: '长度 32 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.getData();
        this.getSchoolData(); //网点提现
        this.getPublicAccountData(); //公众号配置
        this.getWeChatPayConfigData();
    },
    methods: {
        async save_shoptype() {
            let res = await setShopType({ shoptype: this.value });
            if (res.code == 1) {
                this.$message.success('修改店铺类型成功');
            } else {
                this.$message.error('修改店铺类型失败');
            }
        },
        getData() {
            footerNavListData().then((res) => {
                //console.log(res);
                //console.log(this.form);
                this.shopSetList = res.data;
                this.form.shopname = res.data.shopname;
                this.value = res.data.shoptype;
                this.form.cover = res.data.cover;
                this.form.content = res.data.content;
                this.form.share.title = res.data.share.title ? res.data.share.title : '';
                this.form.share.desc = res.data.share.desc ? res.data.share.desc : '';
                this.form.copyright.show = res.data.copyright.show ? res.data.copyright.show : '';
                this.form.copyright.title = res.data.copyright.title ? res.data.copyright.title : '';
                this.form.copyright.description = res.data.copyright.description ? res.data.copyright.description : '';
                this.form.copyright.url = res.data.copyright.url ? res.data.copyright.url : '';
                this.form.show_view = res.data.show_view;
                this.form.show_sale = res.data.show_sale;
                this.form.show_favorites = res.data.show_favorites;
                this.form.show_marking_price = res.data.show_marking_price;
            });
        },
        getSchoolData() {
            getSchoolPayInfo().then((res) => {
                if (res.code == 1) {
                    this.ruleForm = res.data;
                }
            });
        },

        getPublicAccountData() {
            getPublicAccount({ shop_id: localStorage.getItem('shopuuid') }).then((res) => {
                if (res.data != null) {
                    this.publicAccountForm = res.data;
                } else {
                    this.publicAccountForm = {
                        appid: '',
                        secret: ''
                    };
                }
            });
        },

        getWeChatPayConfigData() {
            getWeChatPayConfig({ shop_id: localStorage.getItem('shopuuid') }).then((res) => {
                if (res.data) {
                    this.weChatForm = res.data;
                }
            });
        },
        // 设置
        set_title() {
            this.shop_title_dialog = true;
        },
        set_logo() {
            this.shop_logo_dialog = true;
        },
        set_content() {
            this.shop_content_dialog = true;
        },
        set_share() {
            this.shop_share_dialog = true;
        },
        set_copyright() {
            this.shop_copyright_dialog = true;
        },
        cancel() {
            this.shop_title_dialog = false;
            this.shop_content_dialog = false;
            this.shop_logo_dialog = false;
            this.shop_style_dialog = false;
            this.shop_share_dialog = false;
            this.shop_copyright_dialog = false;
            this.shop_mobile_dialog = false;
            this.shop_sale_btn_dialog = false;
        },
        save() {
            editFooterNavData(this.form).then((res) => {
                console.log(this.form);
                if (res.code == 1) {
                    this.$message.success('设置成功');
                    // setTimeout(() => {
                    //     location.reload();
                    // }, 200);
                    this.getData();
                    this.cancel();
                }
            });
        },
        show_set() {
            this.save();
        },
        showUploadImage() {
            //显示上传组件
            this.$refs.uploadimagecom.dialogVisible = true;
        },
        //确认按钮传值过来并赋值到form表单上
        childByImageValue: function (childValue) {
            this.form.cover = childValue;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                // console.log(valid);
                // console.log(formName);
                // return;
                // ruleForm
                // publicAccountForm
                // weChatForm

                if (valid) {
                    if (formName == 'ruleForm') {
                        saveSchoolPayInfo({ payinfo: JSON.stringify(this.ruleForm) }).then((res) => {
                            if (res.code == 1) {
                                this.$message.success('保存成功');
                            } else if (res.code == -1) {
                                this.$message.error('保存失败');
                            } else if (res.code == 2) {
                                this.$message.success('信息一样，无需更改');
                            }
                        });
                    } else if (formName == 'publicAccountForm') {
                        savePublicAccount({
                            appid: this.publicAccountForm.appid,
                            secret: this.publicAccountForm.secret,
                            shop_id: localStorage.getItem('shopuuid')
                        }).then((res) => {
                            if (res.code == 1) {
                                this.$message.success('保存成功');
                            } else if (res.code == -1) {
                                this.$message.error('保存失败');
                            } else if (res.code == 2) {
                                this.$message.success('信息一样，无需更改');
                            }
                        });
                    } else if (formName == 'weChatForm') {
                        // console.log(this.weChatForm);
                        // console.log(this.weChatForm.MCHID);
                        // console.log(this.weChatForm.APIKEY);
                        // return;
                        saveWeChatPayConfig({
                            MCHID: this.weChatForm.MCHID,
                            APIKEY: this.weChatForm.APIKEY,
                            shop_id: localStorage.getItem('shopuuid')
                        }).then((res) => {
                            if (res.code == 1) {
                                this.$message.success('保存成功');
                            } else if (res.code == -1) {
                                this.$message.error('保存失败');
                            } else if (res.code == 2) {
                                this.$message.success('信息一样，无需更改');
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        pubReset(formName) {
            // console.log(formName);
            this.$refs.formName.resetFields();
        }
    }
};
</script>

<style lang='scss' scoped>
.page {
    margin-bottom: 30px;
}
.shopFirstMsg {
    margin-top: 0px !important;
}
.s-head {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #353535;
    padding: 15px 20px 0 0;
    font-weight: bold;
}
.s-head::before {
    display: inline-block;
    width: 2px;
    height: 14px;
    content: '';
    margin-right: 10px;
    border-left: 2px solid #2a75ed;
}
.item {
    position: relative;
    display: flex;
    color: #353535;
    font-size: 14px;
}
.item .name {
    display: flex;
    align-items: center;
    color: #888;
    width: 180px;
    font-size: inherit;
    padding-left: 12px;
}
.item .setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #353535;
    font-size: 14px;
    padding: 20px;
    padding-left: 0;
    border-bottom: 1px solid #eee;
}
.el-button--text {
    font-weight: normal;
    color: #2a75ed;
}
.info-image {
    width: 80px;
    height: 60px;
    border-radius: 4px;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 64px !important;
    width: 64px !important;
    text-align: center;
}

.avatar-uploader:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 64px;
    height: 64px;
    line-height: 64px;
}

.avatar {
    width: 100%;
    display: block;
}
.container {
    position: relative;
    .postion_img {
        width: 66%;
        position: absolute;
        right: 0;
        top: 381px;
    }
}
</style>